import React from 'react'
// 导入路由组件
import { Route } from 'react-router-dom'
// 导入首页\找房\新闻\我的页组件
import Index from '../Index'
import HouseList from '../HouseList'
import News from '../News'
import Profile from '../Profile'
// 导入tabbar组件
import { TabBar } from 'antd-mobile'
// 导入自己的样式文件
import './index.scss'

// tabbar固定的数据
const tabItems = [
    {
        title: '首页',
        icon: 'icon-ind',
        path: '/home'
    },
    {
        title: '找房',
        icon: 'icon-findHouse',
        path: '/home/list'
    },
    {
        title: '资讯',
        icon: 'icon-infom',
        path: '/home/news'
    },
    {
        title: '我的',
        icon: 'icon-my',
        path: '/home/profile'
    },
]

/* 
  问题：点击首页导航菜单，导航到 找房列表 页面时，找房菜单没有高亮

  原因：原来我们实现该功能的时候，只考虑了 点击 以及 第一次加载 Home 组件的情况。但是，我们没有考虑不重新加载 Home 组件时的路由切换，因为，这种情况下，我们的代码没有覆盖到

  解决：
    思路：在 路由切换 时，也执行 菜单高亮 的逻辑代码
    1 添加 componentDidUpdate 钩子函数
    2 在钩子函数中判断路由地址是否切换（因为路由的信息是通过 props 传递给组件的，所以，通过比较更新前后的两个props）
    3 在路由地址切换时，让 菜单高亮
*/

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 默认选中的tab菜单项
            selectedTab: this.props.location.pathname,
        };
    }

    // 组件更新的钩子函数,路径切换时会被调用  要在判断中做状态的修改,否则会变成递归出问题
    componentDidUpdate(prevProps) {
        console.log('上一次路由信息', prevProps);
        console.log('当前路由信息', this.props);
        if (prevProps.location.pathname !== this.props.location.pathname) {
            this.setState(() => {
                return {
                    selectedTab: this.props.location.pathname
                }
            })
        }
    }

    // 渲染tabbar栏
    renderTabBarItem() {
        return tabItems.map(item => <TabBar.Item
            title={item.title}
            key={item.title}
            icon={<i className={`iconfont ${item.icon}`} />}
            selectedIcon={<i className={`iconfont ${item.icon}`} />}
            selected={this.state.selectedTab === item.path}
            // onPress	bar 点击触发，需要自己改变组件 state & selecte={true}
            onPress={() => {
                this.setState({
                    selectedTab: item.path,
                });
                this.props.history.push(item.path)
            }}
        ></TabBar.Item>
        )

    }

    render() {
        return (
            <div className="home">
                {/* 渲染子路由 */}
                {/* 解决模糊匹配 加 exact */}
                <Route path="/home" exact component={Index}></Route>
                <Route path="/home/list" component={HouseList}></Route>
                <Route path="/home/news" component={News}></Route>
                <Route path="/home/profile" component={Profile}></Route>

                {/* TabBar */}
                <TabBar
                    noRenderContent={true}
                    unselectedTintColor="#888"
                    tintColor="#21b97a"
                    barTintColor="white"
                >
                    {this.renderTabBarItem()}
                </TabBar>
            </div>
        )
    }
}